<!--
 * 轮播组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-swiper :list="list" :current="current" autoplay preview @change="handleSwiperChange" mode="bar" prevNext></pure-swiper>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 数据
    const list = ref([
        { src: "/static/3.png", title: "呼尔将出换美酒" },
        { src: "/static/4.png", title: "与尔同销万古愁" },
        { src: "/static/5.png", title: "但愿人长久，千里共婵娟" },
        { src: "/static/6.png", title: "大鹏一日同风起，扶摇直上九万里" },
        { src: "/static/7.png", title: "十步杀一人，千里不留行" },
        { src: "/static/8.png", title: "仙人抚我顶，结发受长生" },
    ]);
    const current = ref(0);

    // 切换了
    function handleSwiperChange(event) {
        current.value = event.detail.current;
    }

    // 指示器点击切换事件
    function handleIndicatorChange(index) {
        console.log("指示器点击切换事件", index);
        current.value = index;
    }
</script>

<style scoped lang="scss"></style>
